<template>
  <div class="research1">
      <div>
          <ul>
              <li class="newsdetail" v-for="(item,index) in firstnews" :key="index">
                  <img :src="item.thumbnail" alt="新闻缩略图">
                  <div class="newsinfo">
                      <nuxt-link target="_blank" :to="'/post/' + item.pid"><h1>{{item.name}}</h1></nuxt-link>
                      <h2>{{item.summary}}</h2>
                      <p>
                          <span><i class="el-icon-time"></i>{{item.createtime.slice(0,11)}}</span>
                          <span><i class="el-icon-view"></i>阅读：{{item.readNum}}</span>
                          <span>
                              <i class="el-icon-news"></i>
                              <nuxt-link target="_blank" :to="'/newslist/' + item.pinyin" v-for="(item,index) in item.tagName" :key="index">{{item.name}}</nuxt-link>
                          </span>
                      </p>
                  </div>
              </li>
               <li class="newsinfo2" v-for="(item,index) in newdata" :key="index">
                      <p class="newstitle">
                          <nuxt-link target="_blank" :to="'/post/' + item.pid"><i class="dian"></i><span class="name">{{item.name}}</span></nuxt-link>          
                          <span>{{item.createtime.slice(0,11)}}</span>              
                      </p>
                      <h2>摘要：{{item.summary}}</h2>
              </li>
          </ul>
          <div class="line" v-if="show"></div>
      </div>
  </div>
</template>


<script>
export default {
  props: {
    newdata: {
      type: Array,
      default: function() {
        return [];
      }
    },
    show:{
      type:Boolean,
      default:false
    },
    firstnews: {
      type: Array,
      default: function() {
        return [];
      }
    },
  }
};
</script>

<style scoped>
.newstitle {
  display: flex;
  justify-content: space-between;
  margin: 20px 10px;
}
.newstitle a {
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  font-size: 16px;
  color: #333;
  height: 30px;
  line-height: 30px;
}
.newstitle span {
  height: 30px;
  line-height: 30px;
}
.newstitle .name {
  vertical-align: middle;
}
.dian {
  display: inline-block;
  height: 6px;
  width: 6px;
  background: black;
  border-radius: 50%;
  margin-right: 10px;
}
.newsinfo2 h2 {
  padding-left: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666;
  font-size: 14px;
}
.newsinfo2:hover .name{
  color: #cd9c54;  
}
.research1 {
  width: 100%;
  overflow: hidden;
  background: white;
  padding: 0 20px 27px;
  box-sizing: border-box;
}
.title {
  padding: 20px 0 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.title span:nth-child(1) {
  color: #cd9c54;
  font-size: 22px;
}
.title span:nth-child(2) {
  color: #666;
  font-size: 14px;
}
.newsdetail {
  width: 100%;
  margin: 20px 0;
  overflow: hidden;
}

.newsdetail h1:hover {
  color: #cd9c54;
}
.newsdetail img {
  float: left;
  height: 160px;
  width: 220px;
}
.newsdetail .newsinfo {
  float: left;
  width: 342px;
  height: 160px;
  margin-left: 30px;
}
.newsinfo h1 {
  color: #333;
  font-weight: bolder;
  font-size: 16px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 24px;
}
.newsinfo h2 {
  color: #666;
  font-size: 14px;
  margin-top: 16px; 
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  height: 38px;
  -webkit-box-orient: vertical;
}
.newsinfo p {
  color: #666;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.newsinfo p a {
  margin-right: 10px;
}
.newsinfo p i {
  margin-right: 10px;
}
.line{
    height: 30px;
    border-bottom: 1px dashed #e6e6e6;
}
</style>

